
<template>
	<view class="details">
		<view class="details_top" v-show="Comments_flag">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in imgs" :key="index" class="wh">
						<view class="swiper-item ">
							<image :src="item" mode=""></image>
						</view>
					</swiper-item>

				</swiper>
			</view>

		</view>
		<view class="second_view" v-show="Comments_flag">
			<view class="second_view_top_left">
				<view>{{details.prodName}}</view>
			</view>
			<view class="second_view_top_right" @click="addOrCancel()">
				<view class="second_view_top_right_text">

					<image v-if="flag" src="../../../images/icon/prod-col-red.png" class="shoucnag"></image>
					<image v-if="!flag" src="../../../images/icon/prod-col.png" mode="" class="shoucnag"></image>
				</view>
				<view class="second_view_top_right_bot_text">
					收藏
				</view>
			</view>
		</view>
		<view class="text_details" v-show="Comments_flag">
			{{details.brief}}
		</view>
		<view class="money_red" v-show="Comments_flag">
			￥{{details.price}}
		</view>

		<view class="color_details" v-show="Comments_flag">
			<view class="color_details_left">已选</view>
			<view class="color_details_center">
				<view>{{specification.skuName}},{{nums}}件</view>
			</view>
			<view class="color_details_right">...</view>
		</view>
		<!-- 评价 -->
		<view class='cmt-wrap'>
			<view class="cmt-tit" bindtap='showComment' v-show="!Comments_flag">
				<view class="cmt-t">
					商品评价1
					<text class="cmt-good">好评0%</text>
				</view>
				<view class="cmt-count cong_size" @click='conments("trues")'>
					X

				</view>
			</view>
			<view class="cmt-tit" bindtap='showComment' @click='conments("falses")' v-show="Comments_flag">
				<view class="cmt-t">
					评价
					<text class="cmt-good">好评0%</text>
				</view>
				<view class="cmt-count">
					共0条
					<text class="cmt-more"></text>
				</view>
			</view>
			<view class="cmt-cont">
				<view class="cmt-tag" bindtap='showComment'>
					<text>全部 ()</text>
					<text>好评 ()</text>
					<text>中评 ()</text>
					<text>差评 ()</text>
					<text>有图 ()</text>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="pop-head">
					<image class="img" :src="specification.pic" mode=""></image>
					<view class="pop-price">
						<text>{{specification.stocks!=0?specification.price:"无货"}}</text>
					</view>
					<view class="pop-title">
						<text>已选</text>
						{{specification.skuName}}
					</view>
					<view class="close" @click="close">
						X
					</view>
				</view>
				<view class="pop-main">
					<view class="pop-ban">
						<view class="pop-kind">

						</view>
						<view class="aa">
							<view class="pop-active" v-for="(s,i) in detail" :key="i">

								<view class="top_version">{{i}}</view>

								<text v-for=" (item,index) in s" :key="index" class="pop-text "
									:class="ars[i]==item?'nannan':''" @click="xiang(item,i)">
									{{item}}
								</text>


							</view>

						</view>
					</view>
					<view class="pop-num">
						<view class="pop-1">
							数量
						</view>
						<view class="pop-2">
							<button class="btn1" @click='operation("减")'>-</button>
							<text class="a1">{{nums}}</text>
							<button class="btn1" @click='operation("加")'>+</button>
						</view>
					</view>
				</view>

				<view class="pop-footer" v-show="specification.stocks!=0">
					<view class="jia btn2" @click="addshop()">
						加入购物车
					</view>
					<view class="li btn2">
						立即购买
					</view>
				</view>

				<view class="pop-footer" v-show="specification.stocks==0">
					<view class="jia btn2 clocss">
						加入购物车
					</view>
					<view class="li btn2 clocss" @click="godingdanDatils()">
						立即购买
					</view>
				</view>




			</view>
		</uni-popup>
		<!-- footer客服 -->
		<view class="cart-footer {{findSku?'':'gray'}}" v-show="flasg">

			<button class="btn icon" open-type="contact" style="border-radius: 0 5px 0 0;">
				<image src="../../../images/icon/kefu.png" style="margin-top: 5rpx;"></image>
				客服
			</button>
			<view class="btn icon" bindtap=' toCartPage' @click="toShop()">
				<image src="../../../images/tabbar/basket.png"></image>
				购物车
				<view class='badge badge-1'>1</view>
			</view>
			<view class="btn cart">
				<text @click="toggle('bottom')">加入购物车</text>
			</view>
			<view class="btn buy" @click="godingdanDatils()">
				<text>立即购买</text>
			</view>
		</view>
		<view class="bottom_imgs" v-show="Comments_flag">
			<rich-text :nodes="texts" class="imgs_big"></rich-text>

		</view>
	</view>
</template>
<script>
	import {
		request
	} from "@/utils/request.js"
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				findSku: true,
				details: {},
				imgs: [],
				texts: "",
				flag: false,
				detail: {},
				nums: 1,
				skulist: [],
				flasg: true,
				ars: {},
				skuids: "",
				bss: "",
				specification: {},
				Comments_flag: true,
				Tracks: []
			}
		},
		methods: {
			godingdanDatils() {
				uni.navigateTo({
					url: `/pages/DetailsoftheOrder/DetailsoftheOrder?item=` + encodeURIComponent(JSON.stringify({
						details: this.details,
						skuid: this.specification.skuId,
						nums: this.nums,
						couponIds: []
					}))
				})
			},
			conments(flag) {
				if (flag == "trues") {
					this.Comments_flag = true
				} else {
					this.Comments_flag = false
				}

			},
			addOrCancel() {
				request({
					url: "/p/user/collection/addOrCancel",
					method: "post",
					data: this.details.prodId,
				}).then(res => {
					this.flag = !this.flag
				})
			},
			toggle(type) {
				this.flasg = false;
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			close() {
				this.flasg = true;
				this.$refs.popup.close()
			},
			xiang(e, num) {
				if (this.ars[num]) {
					this.ars[num] = e
				} else {
					this.ars[num] = ""
					this.ars[num] = e
				}
				this.bss = ""
				for (let var1 in this.ars) {
					this.bss = this.bss + this.ars[var1] + " "
				}
				let aps = this.skulist.filter(item => {
					return item.skuName == this.bss
				})
				this.specification = aps[0]
			},
			operation(value) {
				if (value == "加") {

					if (this.nums >= 999) {

						this.nums = 999

					} else {
						this.nums += 1;
					}
				} else if (value == "减") {
					if (this.nums <= 1) {
						this.nums = 1;
					} else {
						this.nums -= 1;
					}
				}
			},
			addshop() {

				request({
					url: "/p/shopCart/changeItem",
					method: "post",
					data: {
						"basketId": 0,
						"count": this.nums,
						"prodId": this.details.prodId,
						"shopId": this.details.shopId,
						"skuId": this.specification.skuId
					}
				}).then(res => {
					if (res == "库存不足") {
						console.log(res);
					} else {
						uni.showToast({
							title: '加入购物车成功',
							duration: 1000 //单位毫秒
						});
					}
				})
			},
			toShop() {
				uni.switchTab({
					url: "/pages/tabBar/Shopcar/Shopcar"
				})
			},


		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			request({
				url: `/p/user/collection/isCollection`,
				method: "get",
				data: {
					prodId: option.item
				},
			}).then(res => {
				this.flag = res

			})

			function replace_Rich_text(html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/, '').replace(/\style='[^']+'/gi,
						'');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				let newContent1 = html.replace(/<div[^>]*>/gi, function(match, capture) {
					match = match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/, '').replace(/\style='[^']+'/gi,
						'');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				let newContent2 = html.replace(/<table[^>]*>/gi, function(match, capture) {
					match = match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/, '').replace(/\style='[^']+'/gi,
						'');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'< img style="max-width:414px;height:auto;display:block;margin-top:0;margin-bottom:0;"');
				return newContent;
			}
			uni.request({
				url: "http://111.67.198.176:8112/prod/prodInfo",
				method: "get",
				data: {
					prodId: option.item
				},
				dataType: "json",
				success: (res) => {

					let arrs = uni.getStorageSync("Tracks")
					if (!arrs) {
						uni.setStorageSync("Tracks", [])
						uni.setStorageSync("Tracks", [{
							shop: res.data,
							times: new Date()
						}])
					} else {
						let arrays = arrs
						arrays.forEach((item, index) => {
							console.log(item.shop.prodName, res.data.prodName, 'ssssssssss');
							if (item.shop.prodName == res.data.prodName) {
								arrays[index] = {
									shop: res.data,
									times: new Date()
								}
							} else {
								arrays.push({
									shop: res.data,
									times: new Date()
								})
							}
						})
						arrs = arrays
						uni.setStorageSync("Tracks", arrs)
					}
					this.details = res.data
					res.data.skuList.forEach((item, index) => {
						let arr = item.properties.split(";")
						arr.forEach((items, indexs) => {
							let skus = items.split(":")[0]
							let skuvalue = items.split(":")[1]
							if (this.detail[skus]) {
								let flag = this.detail[skus].indexOf(skuvalue)
								if (flag == -1) {
									this.detail[skus].push(skuvalue)
								}
							} else {
								this.detail[skus] = []
								this.detail[skus].push(skuvalue)
							}
						})
					})
					this.skulist = res.data.skuList
					this.specification = res.data.skuList[0]
					let arr = res.data.skuList[0].properties.split(";");
					arr.forEach((item) => {
						let key = item.split(":")[0];
						let value = item.split(":")[1];
						this.ars[key] = value
					})

					this.imgs = res.data.imgs.split(",")
					this.texts = replace_Rich_text(res.data.content)
				}
			})

		}
	}
</script>
<style lang="scss">
	.clocss {
		background: #ccc !important;
		color: white !important;
	}

	.cong_size {
		font-size: 20px !important;
	}

	.nannan {
		background: red !important;
		color: white !important;

	}

	//弹框内容
	.pop-active {
		width: 100%;

	}

	.top_version {
		margin-bottom: 10px;
		width: 100%;
	}

	.pop-head {
		position: relative;
		line-height: 25px;
		padding-left: 10px;
		font-size: 16px;
		color: #333;
		height: 50px;
		padding: 0 0 10px 110px;
		background-color: #fff;

		.img {
			position: absolute;
			left: 10px;
			top: -32px;
			border-radius: 2px;
			width: 90px;
			height: 90px;
			border: 0 none;
			vertical-align: top;
		}

		.pop-price {
			display: inline-block;
			height: 40px;
			line-height: 40px;
			color: #e4393c;
			font-size: 15px;
		}

		.pop-title {
			word-break: break-all;
			font-size: 12px;
			color: #333;
			line-height: 1.4em;
			padding-right: 10px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;

			text {
				color: #999;
				margin-right: 5px;
			}
		}

		element.style {}

		.close {
			color: #aaa;
			border-radius: 12px;
			line-height: 20px;
			text-align: center;
			height: 20px;
			width: 20px;
			font-size: 18px;
			padding: 1px;
			position: absolute;
			top: 0px;
			right: 30px;
		}
	}

	.pop-main {
		box-sizing: border-box;
		max-height: 379px;
		padding-bottom: 100px;
		overflow: auto;

		.pop-kind {
			font-size: 12px;
			color: #999;
			margin: 0 10px;
			height: 40px;
			line-height: 40px;
		}

		.aa {
			display: flex;
			flex-wrap: wrap;

			.pop-active {
				overflow: hidden;
				margin-bottom: 3px;


				.pop-text {
					display: inline-block;
					padding: 0 10px;
					min-width: 20px;
					max-width: 270px;
					overflow: hidden;
					height: 30px;
					line-height: 30px;
					text-align: center;
					margin-left: 10px;
					margin-bottom: 10px;
					border-radius: 4px;
					color: #333;
					background-color: #f7f7f7;
					font-size: 14px;
					border: 1px solid #aaa;
				}

				.active {
					background-color: #eb2444;
					border: 1px solid #eb2444 !important;
					color: #fff;
				}
			}
		}


		.pop-num {
			display: flex;
			justify-content: space-between;

			.pop-2 {
				display: flex;
				width: 150px;

				.btn1 {
					width: 30px;
					height: 30px;
					line-height: 30px;
					background: #f7f7f7;
					text-align: center;
					padding-right: 25px;
				}
			}
		}
	}

	.pop-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: row nowrap;
		height: 98rpx;
		z-index: 999;
		box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
		background: #000;

		.btn2 {
			position: relative;
			display: flex;
			flex-grow: 1;
			justify-content: center;
			align-items: center;
			width: 0;
			background-color: #fff;
			font-size: 28rpx;
			flex-flow: column;
		}

		.jia {
			background: #584e61;
			color: #fff;
		}

		.li {
			background: #eb2444;
			color: #fff;
		}
	}

	//弹框
	@mixin flex {
		/* #ifndef APP-NVUE */

		/* #endif */
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		min-height: 375px;
		max-height: 475px;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		width: 100%;
		height: 405px;
		background-color: #fff;
	}

	.popup-height {
		@include height;
		width: 200px;
	}


	.shopcar {
		position: fixed;
		bottom: 0px;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: row nowrap;
		height: 98rpx;
		z-index: 999;
		box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);

		.btn {
			position: relative;
			display: flex;
			flex-grow: 1;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			font-size: 28rpx;
			flex-flow: column;
		}

		.icon {
			flex-grow: 0;
			flex-shrink: 0;
			width: 125rpx;
			font-size: 20rpx;
			border: 1px solid #ccc;

			image {
				width: 50rpx;
				height: 50rpx;
				color: #000;
			}
		}

		.cart {
			background: #584e61;
			color: #fff;
		}

		.buy {
			background: #eb2444;
			color: #fff;
		}
	}

	// 弹框参上
	.imgs_big {
		width: 100%;

	}

	.imgs_big img {
		width: 100%;
	}

	/* 最下面图片 */
	.bottom_imgs {
		width: 100%;
	}

	/* 轮播 */
	.uni-margin-wrap {
		width: 100%;
		height: 100%;
	}


	.swiper {
		width: 100%;
		height: 100%;
	}

	.swiper-item image {
		width: 100% !important;
		height: 100% !important;
	}

	.swiper-item {
		width: 100%;
		height: 100% !important;
	}

	.wh {
		width: 100%;
		height: 100%;
	}

	/** 底部按钮 */

	.cart-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: row nowrap;
		height: 98rpx;
		z-index: 999;
		box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
	}

	.cart-footer .btn {
		position: relative;
		display: flex;
		flex-grow: 1;
		justify-content: center;
		align-items: center;
		width: 0;
		background-color: #fff;
		font-size: 28rpx;
		flex-flow: column;
	}

	.cart-footer .btn.icon {
		flex-grow: 0;
		flex-shrink: 0;
		width: 125rpx;
		font-size: 20rpx;
		color: #666;
	}

	.cart-footer .btn.icon image {
		width: 50rpx;
		height: 50rpx;
	}

	.cart-footer .btn.cart {
		background: #584e61 !important;
		color: #fff;
	}

	.cart-footer .btn.buy {
		background: #eb2444 !important;
		color: #fff;
	}

	.cart-footer.gray .btn.cart,
	.cart-footer.gray .btn.buy {
		background: #ddd;
	}

	.cart-footer .btn .badge {
		position: absolute;
		top: 20rpx;
		left: 62rpx;
		display: inline-block;
		width: 28rpx;
		height: 28rpx;
		border-radius: 14rpx;
		background-color: #eb2444;
		text-align: center;
		line-height: 28rpx;
		font-size: 18rpx;
		color: #fff;
	}

	.cart-footer .btn .badge-1 {
		width: 36rpx;
	}

	.cart-footer .btn .badge-2 {
		width: 48rpx;
		left: 52rpx;
	}

	/** 底部客服参上 */
	/** 评价*/

	.cmt-wrap {
		background: #fff;
		margin-top: 20rpx;
		position: relative;
		line-height: 48rpx;
	}

	.cmt-tit {
		font-size: 32rpx;
		position: relative;
		border-bottom: 1px solid #ddd;
		padding: 20rpx;
	}

	.cmt-t {
		width: 300rpx;
	}

	.cmt-good {
		color: #eb2444;
		font-size: 24rpx;
	}

	.cmt-count {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		font-size: 24rpx;
		color: #666;
	}

	.cmt-more {
		width: 20rpx;
		height: 20rpx;
		border-top: 2rpx solid #999;
		border-right: 2rpx solid #999;
		transform: rotate(45deg);
		margin-left: 10rpx;
		display: inline-block;
	}

	.cmt-cont {
		padding: 0 20rpx;
	}

	.cmt-tag {
		position: relative;
		padding: 14px 3px 0 0;
		margin: 0;
	}

	.cmt-tag text {
		margin: 0 10px 10px 0;
		background: #fdf0f0;
		display: inline-block;
		padding: 0 10px;
		height: 25px;
		border-radius: 3px;
		line-height: 25px;
		font-size: 12px;
		font-family: -apple-system, Helvetica, sans-serif;
		color: #666;
	}

	.cmt-tag text.selected {
		color: #fff;
		background: #e93b3d;
	}



	.color_details_center {
		width: 78%;
	}

	.color_details_left {
		width: 10%;
	}

	.color_details_right {
		width: 10%;
	}

	.color_details {
		width: 100%;
		padding: 10px 10px;
		margin: 10px 0px;
		background: white;
		display: flex;
		align-items: center;
	}

	.shoucnag {
		width: 25px;
		height: 25px;
	}

	.money_red {
		background: white;
		padding: 10px 10px;
	}

	.text_details {
		background: white;
		padding: 0px 10px;
	}

	.second_view {
		background: white;
		padding: 0px 10px;
	}

	.money_red {
		color: red;
	}

	.text_details {
		width: 100%;
	}

	.second_view_top_right_text {
		width: 100%;
		text-align: center;
	}

	.details {
		width: 100%;
		height: 100%;
	}

	.details_top {
		width: 100%;
		height: 50%;
	}

	.details_top>image {
		width: 100%;
		height: 100%;
	}

	.second_view {
		display: flex;
		width: 100%;
		flex-direction: row;
		padding-top: 10px;
		box-sizing: border-box;
	}

	.second_view_top_left {
		padding-top: 10px;
		width: 70%;
		height: 50px;
		padding: 0px 10px;

	}

	.second_view_top_left>view {
		width: 100%;
		height: 80%;
		align-items: center;
		display: flex;
		border-right: 1px solid #ccc;
	}

	.second_view_top_right {
		width: 27%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
</style>
